<template>
  <ElButton @click="handleHistoryClick" type="danger">
    <ElIcon>
      <Grid />
    </ElIcon>
    历史记录
  </ElButton>
  <MyDialog v-bind="historyDialog" v-model:visible="historyDialog.visible">
    <vue3-pro-table
      ref="proTable"
      style="height: 100%"
      :fit="true"
      :request="historyTableProps.request"
      :columns="historyTableProps.columns"
      :search="historyTableProps.search"
    >
      <template #synchronous="{ row }">
        {{ row.synchronous === 0 ? "未同步" : "已同步" }}
      </template>
      <template #measureTime="{ row }">
        {{ dateTimeFormatter(row.measureTime) }}
      </template>
      <!-- 表格操作栏 -->
      <template #operate="scope">
        <el-button
          type="primary"
          @click="handleHistoryEdit(scope.row)"
          v-show="editBtn"
          >编辑</el-button
        >
        <el-button type="danger" @click="handleHistoryDel(scope.row)"
          >删除</el-button
        >
      </template>
    </vue3-pro-table>
  </MyDialog>
</template>

<script lang="ts" setup>
import useLocalHistoryList from "@/hooks/useLocalHistoryList";
import { Table } from "dexie";
import { dateTimeFormatter } from "@/utils/format";
import { ref, toRaw } from "vue";

const props = withDefaults(
  defineProps<{
    table: Table;
    editBtn?: boolean;
  }>(),
  { editBtn: true }
);
const emit = defineEmits(["edit-click"]);
const proTable = ref();
const {
  handleHistoryDel,
  handleHistoryEdit,
  historyDialog,
  historyTableProps,
  handleHistoryClick,
} = useLocalHistoryList(props.table, proTable, (row) => {
  console.log("row", toRaw(row));
  emit("edit-click", toRaw(row));
});
</script>

<style scoped lang="scss"></style>
